<template>
	<view>
		<view class="wrap-tab flex">
			<block v-for="(item, index) in tab_list" :key="index">
				<view class="item" :class="index === current ? 'f-30 active' : 'f-28'" @click="onTab(index)">
					{{ item.title }}
				
					<view class="line" v-if="index === current"></view>
				</view>
			</block>
		</view>
		
		<view class="wrap">
			<partnerListVue ref="partnerList" v-show="current === 0" />
					
			<partnerIncomeVue ref="partnerIncome" v-show="current === 1" />
					
			<partnerCertVue v-show="current === 2" />
		</view>
	</view>
</template>

<script>
	import partnerListVue from "@/components/mine/partnerList.vue";
	import partnerIncomeVue from "@/components/mine/partnerIncome.vue";
	import partnerCertVue from "@/components/mine/partnerCert.vue";
	export default {
		components: {
			partnerListVue,
			partnerIncomeVue,
			partnerCertVue,
		},
		data() {
			return {
				tab_list: [{ title: "推广会员" }, { title: "我的收益" }, { title: "授权证书" }],
				current: 0,
			};
		},
		onLoad() {
			this.$nextTick(() => {
				this.$refs.partnerList.onInitData();
			});
		},
		/**
		 * 刷新
		 */
		onPullDownRefresh() {
			if (this.current === 0) {
				this.$nextTick(() => {
					this.$refs.partnerList.onRefresh();
				});
			} else if (this.current === 1) {
				this.$nextTick(() => {
					this.$refs.partnerIncome.onRefresh();
				});
			} else if (this.current === 2) {
				uni.stopPullDownRefresh();
			}
		},
		/**
		 * 加载更多
		 */
		onReachBottom() {
			if (this.current === 0) {
				this.$nextTick(() => {
					this.$refs.partnerList.onLoadMore();
				});
			} else if (this.current === 1) {
				this.$nextTick(() => {
					this.$refs.partnerIncome.onLoadMore();
				});
			}
		},
		methods: {
			/**
			 * tab切换
			 */
			onTab(index) {
				this.current = index;

				this.$nextTick(() => {
					if (this.current === 0) {
						this.$refs.partnerList.onInitData();
					} else if (this.current === 1) {
						this.$refs.partnerIncome.onInitData();
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-tab {
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		height: 120rpx;
		overflow: hidden;
		background-color: #F6F6F6;
		z-index: 99;
	
		.item {
			flex: 1;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			overflow: hidden;
			color: #666666;
			position: relative;
	
			.line {
				position: absolute;
				left: 50%;
				bottom: 14rpx;
				transform: translateX(-50%);
				width: 30rpx;
				height: 6rpx;
				background: $theme-gradit-color;
				border-radius: 3rpx;
				overflow: hidden;
			}
		}
	
		.active {
			color: #121212;
		}
	}
</style>
